<template>
	<view class="container">
		<uni-nav-bar title="搜索结果" fixed statusBar :border="false" leftIcon='back' @clickLeft="goBackPage"></uni-nav-bar>
		<view class="searchBox">
			<uni-search-bar class="searchBox-search" placeholder="请输入产品名称" radius="10" bgColor="#fff"
				v-model="searchText" @confirm="handleSearch" cancelButton="none" clearButton="none"></uni-search-bar>
		</view>
		<view class="emptyPage" v-if="Array.isArray(resultsList) && resultsList.length">
			<view class="emptyPage-wrapper">
				<view class="emptyPage-card" v-for="item in resultsList" :key="item._id"
					@click="() => gotoDetail(item)">
					<image class="emptyPage-img" :src="item.goods_thumb.url" mode="aspectFill"></image>
					<view class="emptyPage-infoBox"><text>{{item.name}}</text></view>
				</view>
			</view>

			<uni-load-more :status="status" color='#888' iconType="auto"></uni-load-more>
		</view>
		<empty-page v-else text='未找到搜索内容'></empty-page>
		<to-top :bottom="70" :right="30" :isShow="isShowTop"></to-top>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onPullDownRefresh,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import {
		searchMockList
	} from './mock.js'
	const searchText = ref('')
	const resultsList = ref([])
	const isShowTop = ref(false)
	const status = ref('more')
	const pageParams = ref({
		pageCurrent: 1,
		pageSize: 30
	})

	const goBackPage = () => {
		uni.navigateBack()
	}

	const gotoDetail = (item) => {
		const {
			_id,
			name
		} = item || {}
		uni.navigateTo({
			url: `/pages/detail/index?id=${_id}&name=${name}`
		})
	}

	const handleSearch = () => {
		pageParams.value = {
			...pageParams.value,
			pageCurrent: 1,
		}
		getData()
		setHis()
	}

	const setHis = async (options) => {
		try {
			const searchGoods = uniCloud.importObject('search-goods')
			await searchGoods.setHistoryData(searchText.value)
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg, 'Json：', err)
		}
	}

	const handleMore = (newPageCurrent) => {
		console.log(newPageCurrent)
	}

	const getData = async () => {
		if (!searchText.value) {
			return uni.showToast({
				icon: 'none',
				title: '请输入搜索内容'
			})
		}
		try {
			const searchGoods = uniCloud.importObject('search-goods')
			const res = await searchGoods.searchData({
				content: searchText.value
			})
			resultsList.value = res?.data
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg, 'Json：', err)
		}
		uni.stopPullDownRefresh()
	}

	onReachBottom(() => {
		const {
			pageCurrent
		} = pageParams.value
		const newPageCurrent = pageCurrent + 1
		pageParams.value = {
			...pageParams.value,
			pageCurrent: newPageCurrent,
		}
		handleMore(newPageCurrent)
	})
	onPullDownRefresh(() => getData())
	onLoad((options) => {
		searchText.value = options.text
		getData()
	})
	onPageScroll(e => {
		if (e.scrollTop > 200) {
			isShowTop.value = true
		} else {
			isShowTop.value = false
		}
	})
</script>

<style lang="scss" scoped>
	@import url("../../styles/common.scss");

	.container {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: var(--background-color);
	}

	.searchBox {
		width: 92vw;
		padding: var(--margin-vertical) 0;
		border-bottom: 1px solid #eee;

		&-search {
			width: 100%;
		}
	}

	.emptyPage {
		width: 92vw;
		box-sizing: border-box;

		&-wrapper {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			padding: var(--margin-vertical) var(--margin-horizontal);
			gap: 12px;
		}

		&-card {
			height: 280rpx;
			border-radius: 8px;
			box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
		}

		&-img {
			width: calc(100% - 2px);
			height: calc(100% - 60rpx);
			background-color: white;
			border: 1px solid #eee;
			border-radius: 8px 8px 0 0;
		}

		&-infoBox {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 14px;
			color: #333;
			background-color: #cfe9ff;
		}
	}
</style>